<template>
  <div>
    <div><center><h1>网站菜单管理</h1></center></div>
    <div><center><h2>父级菜单管理</h2></center></div>
    <div>
        <el-table :data="menu_list" border style="width: 70%">
            <el-table-column fixed prop="id" label="ID" width="150">
          </el-table-column>
          <el-table-column fixed prop="menu_name" label="菜单名" width="150">
          </el-table-column>
          <el-table-column prop="menu_way" label="菜单路径" width="150">
          </el-table-column>
          <el-table-column prop="menu_logo" label="菜单图标" width="150">
          </el-table-column>
          <el-table-column prop="menu_level" label="菜单等级" width="150">
          </el-table-column>
          <el-table-column prop="menu_sort" label="菜单顺序" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="change(scope.row.id)" type="text" size="small"
                >修改</el-button>
              <el-button @click="del(scope.row.id)" type="text" size="small"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button @click="add">新增菜单</el-button>
    </div>
    <div>
          <el-drawer
              title="添加菜单信息"
              :visible.sync="drawer"
              direction="rtl">
              <span>菜单名:<input v-model="obj.menu_name"/></span><br>
              <span>菜单路径:<input v-model="obj.menu_way"/></span><br>
              <span>菜单图标:<input v-model="obj.menu_logo"/></span><br>
              <span>菜单顺序:<input v-model="obj.menu_sort"/></span><br>
              <span>菜单等级:
                  <el-select v-model="obj.menu_level" placeholder="请选择父级">
                      <el-option
                      v-for="item in lst1"
                      :key="item.id"
                      :label="item.menu_name"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span>
              <span><el-button @click="realAdd">确认添加</el-button></span>
          </el-drawer>
    </div>
    <div>
          <el-drawer
              title="修改菜单信息"
              :visible.sync="drawer1"
              direction="rtl">
              <span>菜单名:<input v-model="obj1.menu_name"/></span><br>
              <span>菜单路径:<input v-model="obj1.menu_way"/></span><br>
              <span>菜单图标:<input v-model="obj1.menu_logo"/></span><br>
              <span>菜单顺序:<input v-model="obj1.menu_sort"/></span><br>
              <span>菜单等级:
                  <el-select v-model="obj1.menu_level" placeholder="请选择父级">
                      <el-option
                      v-for="item in lst1"
                      :key="item.id"
                      :label="item.menu_name"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span>
              <span><el-button @click="realChange(obj1.id)">确认修改</el-button></span>
          </el-drawer>
      </div>
      <div><center><h2>子级菜单管理</h2></center></div>
    <div>
        <el-table :data="menu_child_list" border style="width: 70%">
            <el-table-column fixed prop="id" label="ID" width="150">
          </el-table-column>
          <el-table-column fixed prop="menu_name" label="菜单名" width="150">
          </el-table-column>
          <el-table-column prop="menu_way" label="菜单路径" width="150">
          </el-table-column>
          <el-table-column prop="menu_logo" label="菜单图标" width="150">
          </el-table-column>
          <el-table-column prop="menu_level" label="菜单等级" width="150">
          </el-table-column>
          <el-table-column prop="menu_sort" label="菜单顺序" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="change(scope.row.id)" type="text" size="small"
                >修改</el-button>
              <el-button @click="del(scope.row.id)" type="text" size="small"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button @click="add">新增菜单</el-button>
    </div>
    <div>
          <el-drawer
              title="添加菜单信息"
              :visible.sync="drawer"
              direction="rtl">
              <span>菜单名:<input v-model="obj.menu_name"/></span><br>
              <span>菜单路径:<input v-model="obj.menu_way"/></span><br>
              <span>菜单图标:<input v-model="obj.menu_logo"/></span><br>
              <span>菜单顺序:<input v-model="obj.menu_sort"/></span><br>
              <span>菜单等级:
                  <el-select v-model="obj.menu_level" placeholder="请选择父级">
                      <el-option
                      v-for="item in lst1"
                      :key="item.id"
                      :label="item.menu_name"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span>
              <span><el-button @click="realAdd">确认添加</el-button></span>
          </el-drawer>
    </div>
    <div>
          <el-drawer
              title="修改菜单信息"
              :visible.sync="drawer1"
              direction="rtl">
              <span>菜单名:<input v-model="obj1.menu_name"/></span><br>
              <span>菜单路径:<input v-model="obj1.menu_way"/></span><br>
              <span>菜单图标:<input v-model="obj1.menu_logo"/></span><br>
              <span>菜单顺序:<input v-model="obj1.menu_sort"/></span><br>
              <span>菜单等级:
                  <el-select v-model="obj1.menu_level" placeholder="请选择父级">
                      <el-option
                      v-for="item in lst1"
                      :key="item.id"
                      :label="item.menu_name"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span>
              <span><el-button @click="realChange(obj1.id)">确认修改</el-button></span>
          </el-drawer>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            drawer:false,
            drawer1:false,
            menu_list:[],
            menu_child_list:[],
            obj:{
                id:'',
                menu_name:'',
                menu_way:'',
                menu_logo:'',
                menu_level:'',
                menu_sort:''
            },
            obj1:{
                id:'',
                menu_name:'',
                menu_way:'',
                menu_logo:'',
                menu_level:'',
                menu_sort:''
            },
            lst1:[],
            lst2:[]
        }
    },
    mounted(){
        this.Menu();
    },
    methods:{
      Menu(){
          this.$axios.get("works/api/v1/menus/").then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
            this.menu_list = resp.data.menu;
            this.lst1 = resp.data.father;
            this.menu_child_list = resp.data.child
            }
            });
        },
        change(id){
            this.drawer1=true
            this.$axios.get('works/api/v1/menus/'+id+'/')
            .then(res => {
                console.log(res)
                if (res.data.code == 200){
                    this.obj1 = res.data.data
                }
            })
            .catch(err => {
                console.error(err); 
            })
        },
        realChange(id){
            this.$axios.put('works/api/v1/menus/'+id+'/',this.obj1)
            .then(res=>{
                console.log(res)
                if (res.data.code == 200){
                    alert(res.data.msg)
                    this.drawer1=false
                    this.Menu()
                }
            })
        },
        add(){
            this.drawer=true
        },
        realAdd(){
            this.$axios.post('works/api/v1/menus/',this.obj)
            .then(res =>{
                console.log(res)
                if (res.data.code == 200){
                    alert(res.data.msg)
                    this.drawer=false
                    this.Menu()
                }else{
                    alert(res.data.msg)
                }
            })
        },
        del(id){
            this.$axios.delete('works/api/v1/menus/'+id+'/')
            .then(res=>{
                console.log(res)
                if (res.data.code == 200){
                    alert(res.data.msg)
                    this.Menu()
                }
            })
        }
    }
}
</script>

<style>

</style>